<template>
  <div class="profile-container">
    <div class="profile-content">
      <!-- 左侧主要内容区域 -->
      <div class="main-section">
        <!-- 头像卡片 -->
        <el-card class="avatar-card" shadow="hover">
          <div class="avatar-card-content">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:9090/files/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
              <div class="avatar-container">
          <img v-if="form.avatar" :src="form.avatar" class="avatar" alt="用户头像">
                <div v-else class="avatar-placeholder">
                  <i class="el-icon-user"></i>
                </div>
                <div class="avatar-overlay">
                  <i class="el-icon-camera"></i>
                  <span>更换头像</span>
                </div>
              </div>
        </el-upload>
            <div class="user-basic-info">
              <h2>{{ form.username || '用户名' }}</h2>
              <p class="nickname">{{ form.nickName || '未设置昵称' }}</p>
              <div class="user-tags">
                <el-tag size="small" effect="plain">
                  <i class="el-icon-user"></i> 会员用户
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 个人信息表单卡片 -->
        <el-card class="info-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-postcard"></i>
            <span>个人信息</span>
      </div>

          <el-form ref="form" :model="form" label-width="90px" class="profile-form">
            <el-row :gutter="20">
              <el-col :span="12">
        <el-form-item label="用户名">
                  <el-input 
                    v-model="form.username" 
                    disabled
                    prefix-icon="el-icon-user">
                  </el-input>
        </el-form-item>
              </el-col>
              
              <el-col :span="12">
        <el-form-item label="昵称">
                  <el-input 
                    v-model="form.nickName"
                    prefix-icon="el-icon-edit"
                    placeholder="请输入昵称">
                  </el-input>
        </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
        <el-form-item label="年龄">
                  <el-input 
                    v-model="form.age"
                    type="number"
                    prefix-icon="el-icon-date"
                    placeholder="请输入年龄">
                  </el-input>
        </el-form-item>
              </el-col>

              <el-col :span="12">
        <el-form-item label="性别">
                  <div class="gender-selector">
                    <el-radio v-model="form.sex" label="男" border>
                      <i class="el-icon-male"></i> 男
                    </el-radio>
                    <el-radio v-model="form.sex" label="女" border>
                      <i class="el-icon-female"></i> 女
                    </el-radio>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="密码">
              <el-input 
                v-model="form.password"
                type="password"
                prefix-icon="el-icon-lock"
                show-password
                placeholder="请输入新密码">
              </el-input>
        </el-form-item>

        <el-form-item label="送货地址">
              <el-input 
                v-model="address" 
                disabled
                prefix-icon="el-icon-location"
                placeholder="暂无地址">
                <template slot="append">
                  <el-button @click="$router.push('/addressManage')" style="border: none;">
                    <i class="el-icon-edit"></i>
                  </el-button>
                </template>
              </el-input>
        </el-form-item>
      </el-form>

          <div class="action-buttons">
            <el-button @click="resetForm" icon="el-icon-refresh-left">重置</el-button>
            <el-button type="primary" @click="save()" icon="el-icon-check">
              保存更改
            </el-button>
          </div>
        </el-card>
      </div>

      <!-- 右侧快捷功能区域 -->
      <div class="sidebar-section">
        <!-- 快捷操作卡片 -->
        <el-card class="quick-actions-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-s-grid"></i>
            <span>快捷操作</span>
          </div>
          <div class="quick-actions">
            <div class="quick-action-item" @click="$router.push('/cart')">
              <div class="action-icon shopping-cart">
                <i class="el-icon-shopping-cart-2"></i>
              </div>
              <div class="action-text">
                <span>购物车</span>
              </div>
            </div>
            <div class="quick-action-item" @click="$router.push('/myOrder')">
              <div class="action-icon orders">
                <i class="el-icon-s-order"></i>
              </div>
              <div class="action-text">
                <span>我的订单</span>
              </div>
            </div>
            <div class="quick-action-item" @click="$router.push('/addressManage')">
              <div class="action-icon address">
                <i class="el-icon-location"></i>
              </div>
              <div class="action-text">
                <span>地址管理</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 账户统计卡片 -->
        <el-card class="stats-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-data-line"></i>
            <span>账户统计</span>
          </div>
          <div class="stats-content">
            <div class="stat-item" @click="$router.push({path: '/myOrder', query: {state: 2}})">
              <div class="stat-value">{{ orderStats.unpaid }}</div>
              <div class="stat-label">待付款</div>
            </div>
            <div class="stat-item" @click="$router.push({path: '/myOrder', query: {state: 4}})">
              <div class="stat-value">{{ orderStats.undelivered }}</div>
              <div class="stat-label">待收货</div>
            </div>
            <div class="stat-item" @click="$router.push({path: '/myOrder', query: {state: 5}})">
              <div class="stat-value">{{ orderStats.uncommented }}</div>
              <div class="stat-label">待评价</div>
            </div>
          </div>
        </el-card>

        <!-- 安全提示卡片 -->
        <el-card class="tips-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-warning-outline"></i>
            <span>安全提示</span>
          </div>
          <div class="tips-content">
            <div class="tip-item">
              <i class="el-icon-success" style="color: #67C23A;"></i>
              <span>定期修改密码</span>
            </div>
            <div class="tip-item">
              <i class="el-icon-success" style="color: #67C23A;"></i>
              <span>保护个人信息</span>
            </div>
            <div class="tip-item">
              <i class="el-icon-success" style="color: #67C23A;"></i>
              <span>谨防网络诈骗</span>
            </div>
          </div>
    </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "ProfileView",
  created() {
    document.title = "我的信息";
    // 取出session的字符串,为了防止取到空值，||一个空对象
    let str = sessionStorage.getItem('user') || '{}';
    // 赋值
    this.form = JSON.parse(str);

    this.loadData();
    this.loadOrderStats();
  },
  data(){
    return{
      form: {},
      address:'',
      orderStats: {
        unpaid: 0,      // 待付款
        undelivered: 0, // 待收货
        uncommented: 0  // 待评价
      }
    }
  },
  methods: {
    save(){
      this.$confirm("确定要更新你的个人信息吗？", "确认操作", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.put('/user', this.form).then(res => {
          if (res.code === '0'){
            this.$message.success("个人信息更新成功！");
            // 重置缓存里面的数据，缓存里面只能存储字符串，切记切记，不能直接传参数过去
            sessionStorage.setItem("user", JSON.stringify(this.form));
          }else {
            this.$message.error("更新失败，请稍后重试")
          }
        })
      }).catch(() =>{
        this.$message({
          type: "info",
          message: "已取消更改"
        })
      })
    },
    resetForm(){
      // 重新从sessionStorage加载数据
      let str = sessionStorage.getItem('user') || '{}';
      this.form = JSON.parse(str);
      this.loadData();
      this.$message.info("已重置为原始数据");
    },
    handleAvatarSuccess(res) {
      this.form.avatar = res.data;
      this.$message.success("头像上传成功！");
    },
    beforeAvatarUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isImage) {
        this.$message.error('上传文件必须是图片格式！');
      }
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isImage && isLt10M;
    },
    loadData() {
      request.get("/address/one", {
        params: {
          userId: this.form.id
        }
      }).then(res => {
        this.address = res.data;
      })
    },
    // 加载订单统计数据
    loadOrderStats() {
      // 获取待付款订单数量 (state = 2)
      request.get("/order/user_order", {
        params: {
          pageNum: 1,
          pageSize: 1,
          search: '',
          state: 2
        }
      }).then(res => {
        if (res.code === '0' && res.data) {
          this.orderStats.unpaid = res.data.total || 0;
        }
      }).catch(() => {
        this.orderStats.unpaid = 0;
      });

      // 获取待收货订单数量 (state = 4)
      request.get("/order/user_order", {
        params: {
          pageNum: 1,
          pageSize: 1,
          search: '',
          state: 4
        }
      }).then(res => {
        if (res.code === '0' && res.data) {
          this.orderStats.undelivered = res.data.total || 0;
        }
      }).catch(() => {
        this.orderStats.undelivered = 0;
      });

      // 获取待评价订单数量 (state = 5)
      request.get("/order/user_order", {
        params: {
          pageNum: 1,
          pageSize: 1,
          search: '',
          state: 5
        }
      }).then(res => {
        if (res.code === '0' && res.data) {
          this.orderStats.uncommented = res.data.total || 0;
        }
      }).catch(() => {
        this.orderStats.uncommented = 0;
      });
    },
  }
}
</script>

<style scoped>
/* 主容器 */
.profile-container {
  min-height: calc(100vh - 60px);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  overflow-y: auto;
}

.profile-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  animation: fadeIn 0.6s ease-in-out;
}

/* 左侧主要内容区域 */
.main-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 头像卡片 */
.avatar-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.avatar-card:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.avatar-card-content {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 15px;
}

/* 头像上传 */
.avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.avatar-container:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 48px;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
}

.avatar-container:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay i {
  font-size: 28px;
}

.avatar-overlay span {
  font-size: 13px;
  font-weight: 500;
}

/* 用户基本信息 */
.user-basic-info {
  flex: 1;
}

.user-basic-info h2 {
  font-size: 26px;
  font-weight: bold;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.user-basic-info .nickname {
  font-size: 15px;
  color: #7f8c8d;
  margin: 0 0 12px 0;
}

.user-tags {
  display: flex;
  gap: 8px;
}

.user-tags .el-tag {
  font-size: 13px;
}

/* 信息卡片 */
.info-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.info-card::v-deep .el-card__body {
  padding: 25px 30px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.card-header i {
  font-size: 18px;
  color: #667eea;
}

/* 表单样式 */
.profile-form {
  margin-top: 5px;
}

.profile-form::v-deep .el-form-item {
  margin-bottom: 20px;
}

.profile-form::v-deep .el-form-item__label {
  color: #34495e;
  font-weight: 500;
  font-size: 14px;
}

.profile-form::v-deep .el-input__inner {
  border-radius: 8px;
  border: 1px solid #e0e6ed;
  transition: all 0.3s ease;
  height: 40px;
  line-height: 40px;
}

.profile-form::v-deep .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.profile-form::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #f8f9fa;
  color: #95a5a6;
}

.profile-form::v-deep .el-input:hover .el-input__inner:not(:disabled) {
  border-color: #b8c7e0;
}

/* 性别选择器 */
.gender-selector {
  display: flex;
  gap: 12px;
  width: 100%;
}

.gender-selector::v-deep .el-radio.is-bordered {
  border-radius: 8px;
  padding: 10px 20px;
  transition: all 0.3s ease;
  margin: 0;
  flex: 1;
  text-align: center;
}

.gender-selector::v-deep .el-radio.is-bordered.is-checked {
  border-color: #667eea;
  background-color: rgba(102, 126, 234, 0.08);
  color: #667eea;
}

.gender-selector i {
  margin-right: 5px;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #ecf0f1;
}

.action-buttons .el-button {
  padding: 11px 28px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-buttons .el-button:not(.el-button--primary) {
  background-color: #f8f9fa;
  border-color: #e0e6ed;
  color: #2c3e50;
}

.action-buttons .el-button:not(.el-button--primary):hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.action-buttons .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 右侧边栏 */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 快捷操作卡片 */
.quick-actions-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 10px 0;
}

.quick-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 15px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-action-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  transition: all 0.3s ease;
}

.action-icon.shopping-cart {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.action-icon.orders {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.action-icon.address {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.quick-action-item:hover .action-icon {
  transform: scale(1.1) rotate(5deg);
}

.action-text span {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

/* 统计卡片 */
.stats-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.stats-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 10px 0;
}

.stat-item {
  text-align: center;
  padding: 15px 10px;
  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
  background: linear-gradient(135deg, #667eea25 0%, #764ba225 100%);
}

.stat-value {
  font-size: 26px;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 13px;
  color: #7f8c8d;
}

/* 提示卡片 */
.tips-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tips-content {
  padding: 10px 0;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  margin-bottom: 8px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  color: #2c3e50;
  transition: all 0.3s ease;
}

.tip-item:last-child {
  margin-bottom: 0;
}

.tip-item:hover {
  background: #e9ecef;
  transform: translateX(5px);
}

.tip-item i {
  font-size: 16px;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .profile-content {
    grid-template-columns: 1fr;
  }

  .sidebar-section {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
  }
}

@media (max-width: 768px) {
  .profile-container {
    padding: 15px 10px;
  }

  .avatar-card-content {
    flex-direction: column;
  text-align: center;
}

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .sidebar-section {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons .el-button {
    width: 100%;
  }
}
</style>
